<template>
  <div class="goods_list">
    <ul>
      <li v-for="item in goodsData" :key="item.product_id">
        <router-link :to="{path:'/details',query:{productID: item.product_id}}">
          <img :src="$target + item.product_picture" :alt="item.product_name" />
          <h2>{{ item.product_name }}</h2>
          <h3>{{ item.product_title }}</h3>
          <p>
            <span class="add">{{ item.product_selling_price }}元</span>
            <span v-if="item.product_selling_price != item.product_price" class="del">{{ item.product_price }}元</span>
          </p>
        </router-link>
      </li>
      <li class="more" v-if="isMore" @click="checkMore">
        <router-link to="" id="app">
			浏览更多》
			<i class="el-icon-d-arrow-right"></i>
			</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["goodsData", "isMore"],
  computed:{
	  categoryArr(){
		  let arr =[]
		  // 遍历当前列表中所有的商品
		  this.goodsData.forEach((item)=>{
			  // 判断去重 
			  if(!arr.includes(item.category_id)){
				  // 取出商品分类
				  arr.push(item.category_id)
			  }
		  })
		  return arr
	  }
  },
  methods:{
	  // 点击浏览更多
	  checkMore(){
		  this.$globalData.$categoryArr=this.categoryArr;
		  this.$router.push({
			  path:"/goods",
			  query:{
				  categoryID:this.categoryArr
			  }
		  })
	  }
	}
}
</script>

<style lang="scss" scoped>
.goods_list li {
  width: 230px;
  height: 280px;
  padding: 10px 0;
  float: left;
  background-color: #fff;
  margin: 0 0 15px 17px;
  text-align: center;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  z-index: 1;
}

.goods_list li:hover {
  z-index: 2;
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}

.goods_list ul li img {
  width: 160px;
  height: 160px;
}

.goods_list ul li h2 {
  font-size: 14px;
  margin: 8px 10px;
  color: black;
}

.goods_list ul li h3 {
  font-size: 11px;
  margin: 8px 10px;
  color: #cccccc;
}

.add {
  color: #ff6700;
}

.del {
  color: #cccccc;
  margin-left: 8px;
  text-decoration: line-through;
}

#app {
  text-align: center;
  font-size: 20px;
  line-height: 280px;
  color: #333;
}
</style>
